<template>
	<view class="ex-mall-page" :class="[$themeClass('panel-another-content-bg-color')]">
		<!-- 头部 -->
		<view class="ex-mall-header" :class="[$themeClass('header-bg-color')]">
			<!-- #ifdef MP-WEIXIN -->
			<view class="ex-mall-header-mp-weixin-fill" :class="[$themeClass('header-title-color')]">支付结果</view>
			<!-- #endif -->
			<view class="ex-mall-header-content">
				<view class="ex-mall-header-left">
					<view class="ex-mall-header-btn" @click="$util.navigateBack" :class="[$themeClass('header-btn-left-another-bg-color')]">
						<text class="ex-mall-header-btn-icon ri-arrow-left-s-line" :class="[$themeClass('header-btn-left-icon-another-color')]"></text>
					</view>
				</view>
				<view class="ex-mall-header-right">
					<view class="ex-mall-header-btn" :class="[$themeClass('search-btn-bg-color')]">
						<text class="ex-mall-header-btn-icon ri-map-2-line" :class="[$themeClass('search-btn-color')]"></text>
					</view>
					<view class="cut" :class="[$themeClass('border-color')]"></view>
					<view class="ex-mall-header-btn" :class="[$themeClass('search-btn-bg-color')]">
						<text class="ex-mall-header-btn-icon ri-bank-card-2-line" :class="[$themeClass('search-btn-color')]"></text>
					</view>
					<view class="cut" :class="[$themeClass('border-color')]"></view>
					<view class="ex-mall-header-btn" :class="[isSuccess?$themeClass('search-btn-bg-color'):$themeClass('header-btn-right-another-bg-color')]">
						<text class="ex-mall-header-btn-icon ri-checkbox-circle-line" :class="[isSuccess?$themeClass('search-btn-color'):$themeClass('header-btn-right-icon-another-color')]"></text>
					</view>
				</view>
			</view>
		</view>

		<view class="success" v-if="isSuccess">
			<view class="msg">
				<view class="icon ri-checkbox-circle-line"></view>
				<view class="title">恭喜你！</view>
				<view class="desc">您的订单已成功下单！请继续关注，因为您的商品很快就会发货。</view>
			</view>
			<view class="bottom" :class="[$themeClass('page-bg-color')]">
				<view class="tips" :class="[$themeClass('panel-title-color')]">还有很多有趣的商品等待你探索</view>
				<view class="btn">继续浏览</view>
			</view>
		</view>
		<view class="fail" v-else>
			<view class="msg">
				<view class="icon ri-close-circle-line"></view>
				<view class="title">支付失败！</view>
				<view class="desc">您的付款方式有问题，请重新检查并再试一次。</view>
			</view>
			<view class="bottom" :class="[$themeClass('page-bg-color')]">
				<view class="tips" :class="[$themeClass('panel-title-color')]">现在想做什么？</view>
				<view class="btn" @click="pay">重新支付</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isSuccess: false
			}
		},
		onLoad() {
			
		},
		methods: {
			pay() {
				uni.showLoading({
					title: '支付中...'
				})
				setTimeout(() => {
					this.isSuccess = true
					uni.hideLoading()
				}, 500)
			}
		}
	}
</script>

<style lang="scss">
	.ex-mall-header-right {
		display: flex;
		align-items: center;

		&>.cut {
			width: 28px;
			margin: 0 5px;
			border-top: 1px dashed #18B566;
		}
	}

	.msg {
		position: absolute;
		top: calc(50% - 165px / 2);
		left: 50%;
		transform: translate(-50%, -50%);
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

		&>.icon {
			font-size: 96px;
		}

		&>.title {
			margin-top: 16px;
			line-height: 1;
			font-size: 29px;
			font-weight: 600;
			color: #292929;
		}
		
		&>.desc {
			margin-top: 24px;
			text-align: center;
			font-size: 14px;
			color: #9093A2;
		}
	}
	
	.bottom {
		position: fixed;
		bottom: 0;
		width: 100%;
		padding: 36px 28px 28px 28px;
		box-sizing: border-box;
		border-radius: 34px 34px 0 0;
		
		&>.tips {
			text-align: center;
			font-size: 14px;
		}
		
		&>.btn {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 100%;
			height: 58px;
			margin-top: 24px;
			font-size: 14px;
			color: #FFFFFF;
			border-radius: 12px;
		}
	}

	.success {
		&>.msg {
			&>.icon {
				color: #60D6D1;
			}
		}
		
		&>.bottom {
			&>.btn {
				background-color: #60D6D1;
			}
		}
	}
	
	.fail {
		&>.msg {
			&>.icon {
				color: #F76842;
			}
		}
		
		&>.bottom {
			&>.btn {
				background-color: #F76842;
			}
		}
	}
</style>
